<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-row">
          <div class="grid_num">{{userCount}}</div>
          <div>用户总数</div>
          </div>
          </div>
        </el-card>
      </el-col>
       <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-row">
          <div class="grid_num">{{orderCount}}</div>
          <div>订单总数</div>
          </div>
          </div>
        </el-card>
      </el-col>
       <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-row">
          <div class="grid_num">{{categoryCount}}</div>
          <div>分类总数</div>
          </div>
          </div>
        </el-card>
      </el-col>
       <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-content-row">
          <div class="grid_num">{{goodsCount}}</div>
          <div>商品总数</div>
          </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card style="margin-top: 30px;">
          <div id="main" style="width: 800px;height:400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="margin-top: 30px;">
            <div id="order" style="width: 800px;height:400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts"
import { mapGetters } from 'vuex'
import {orderCount,goodsCount,categoryCount,userCount,WxUserAll,maleCount, goodsAll} from '@/api/index'
export default {
  data(){
    return{
      userCount:0,//用户总数
      orderCount:0,//订单总数
      goodsCount:0,//商品总数
      categoryCount:0,//分类总数 
      userAll:[],
      maleCount:0,
      girlCount:0,
      goods:[]
    }
  },
  created(){
    this.getOrderCount();
    this.getUserCount();
    this.getGoodsCount();
    this.getCategoryCount();
    this.getUsers();
  },
  mounted() {
    this.initCharts();
    this.initCharts1()
  },
  methods:{
    getUserCount(){
      userCount().then(res=>{
        this.userCount=res.data.count;
      })
    },
     getOrderCount(){
      orderCount().then(res=>{
        this.orderCount=res.data.count;
      })
    },
     getGoodsCount(){
      goodsCount().then(res=>{
       this.goodsCount=res.data.count;
      })
    },
     getCategoryCount(){
      categoryCount().then(res=>{
        this.categoryCount=res.data.count;
      })
    },
    getUsers(){
       WxUserAll().then(res=>{
         this.userAll=res.data.all
      });
    },
    initCharts1(){
      var chart = echarts.init(document.getElementById("order"))   
      goodsAll().then(res=>{
          let goodsTemp=[]
          let temp=null;
          goodsTemp=res.data.all;
          for(let index=0;index<goodsTemp.length-1;index++){
             for(let index1=0;index1<goodsTemp.length-index-1;index1++){
                if(goodsTemp[index1].goodsNumber<goodsTemp[index1+1].goodsNumber){
                    temp=goodsTemp[index1];
                    goodsTemp[index1]=goodsTemp[index1+1]
                    goodsTemp[index1+1]=temp;
                }
             }
          }
          let goodsAll=goodsTemp.slice(0,5)
          let goodsName=[];
          let goodsNumber=[];
          goodsAll.forEach(element => {
            if(element.goodsName.length>4){
               goodsName.push(element.goodsName.slice(0,2));

            }
            goodsNumber.push(element.goodsNumber)
          });
          chart.setOption(
          {
            title: {
                text: '商品的库存量'
            },
            tooltip: {},
            legend: {
                data:['存量']
            },
            xAxis: {
                data: goodsName
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: goodsNumber
            }]
        }
       )
      }
      )

    },
    initCharts() {
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"))
       maleCount().then(res=>{
         let maleCount=res.data.maleCount;
         let girlCount=this.userAll.length-maleCount;
         myChart.setOption({
         title: {
          text: "用户性别比例",
        },
        color:['skyblue','pink'],
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:maleCount, name:'男生'},
                {value:girlCount, name:'女生'}
            ]
        }
    ]
    })
      })
    
    },
  },
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.grid-content{
  display: flex;
  align-items: center;
  height: 80px;
  background-color: #fff;
}
.grid-content-row{
  flex: 1;
 text-align: center;
 font-size: 25px;
 color: darkgray;
}
.grid_num{
  font-size: 30px;
  font-weight: bold;
}
</style>
